<template>
  <div class="editor-wrapper">
    <el-row>
      <el-col :span="12">
        <textarea class="md-text" :value="value" @input="editText" />
      </el-col>
      <el-col :span="12">
        <div v-html="mdHtml"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { marked } from 'marked';
@Component
class editor extends Vue {
  value: string = "";
  editText(e: any) {
    this.value = e.target.value;
  } 
  get mdHtml() {
    return marked.parse(this.value);
  }
}

export default editor;
</script>

<style lang="scss" scoped>
.editor-wrapper {
  width: 100%;
  height: 100vh;
}

.md-text{
      display: block;
      outline: none;
      width: 100%;
      height: 100vh;
}

</style>
